<!DOCTYPE html>
<html>
<head>
<title>Web Components Examples</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:700|Droid+Sans+Mono|Ovo" type="text/css">
<link rel="stylesheet" href="../assets/styles/main.css" type="text/css">
<link rel="stylesheet" href="../assets/styles/prettify.css" type="text/css" />
<script src="../assets/scripts/bug-assist.js"></script>
<meta name="bug.blocked" content="14956">
<meta name="bug.short_desc" content="[Samples]: ">
<meta name="bug.product" content="WebAppsWG">
<meta name="bug.component" content="Component Model">
</head>
<body>
<header>
<ul>
    <li><a href="../samples/index.html">Samples</a></li>
    <li><a href="../explainer/index.html">Explainer</a></li>
    <li><a href="../spec/shadow/index.html">Shadow DOM Spec</a></li>
    <li><a href="../spec/templates/index.html">HTML Templates</a></li>
</ul>
<h1>Web Components Examples</h1>
</header>
<p>This is a collection of code samples for Web Components.</p>

<h2>Component Model Use Case Implementations</h2>

<p>Here are the <a href="http://www.w3.org/2008/webapps/wiki/Component_Model_Use_Cases">Component Model Use Cases</a>, implemented using Web Components:</p>
<ul>
<!--    <li><a href="contacts-widget-custom-element.html">Contacts Widget Custom Element</a>, for the <a href="http://www.w3.org/2008/webapps/wiki/Component_Model_Use_Cases#Contacts_Widget">Contacts Widget</a> use case</li> -->
    <li><a href="table-chart.html">Table-based Charts Custom Element</a>, for the <a href="http://www.w3.org/2008/webapps/wiki/Component_Model_Use_Cases#Table-based_Charts">Table-based Charts</a> use case</li>
    <li><a href="timezone-map-custom-element.html">Timezone Map Custom Element</a>, for the <a href="http://www.w3.org/2008/webapps/wiki/Component_Model_Use_Cases#Timezone_selection_via_Image">Timezone selection via Image</a> use case</li>
    <li><a href="entry-helper.html">Entry Helper Custom Element</a>, for the <a href="http://www.w3.org/2008/webapps/wiki/Component_Model_Use_Cases#Entry-helper">Entry Helper</a> use case</li>
</ul>

<h2>Shadow DOM Code Samples</h2>

<p>It all begins with a basic recipe for making a well-encapsulated <a href="contacts-widget.html">Contacts Widget</a>.</p>

<p>A more advanced recipe shows how <a href="http://dev.w3.org/csswg/css-variables/">CSS Variables</a> could be used to attenuate styling of shadow DOM for things like <a href="widget-theming.html">theming</a>.</p>

<p>The <a href="replay-extension.html">DOM replay extension</a> example/recipe illustrates a technique that can be used to inject new user interface into an existing document without disturbing document's structure.</p>

<p>There's a fairly involved <a href="../spec/shadow/index.html#shadow-dom-example">example</a> in the <a href="../spec/shadow/index.html">Shadow DOM</a> specification.</p>

</body>
</html>